<template>
  <el-header>
    <!-- 左侧的 logo -->
    <span class="topl">
      <img class="logoimg" src="../../assets/images/logo.png" alt="" />
      <i class="btn el-icon-s-grid" @click="toggleClick" />
    </span>

    <!-- 右侧的菜单 -->
    <el-menu
      class="el-menu-top"
      mode="horizontal"
      background-color="#23262E"
      text-color="#fff"
      active-text-color="#fff"
    >
      <el-menu-item index="3">
        <!-- 头像 -->
        <span class="wh"
          >欢迎回来
          {{ userInfo.nickname ? userInfo.nickname : userInfo.username }}</span
        >
        <img
          class="avatar"
          :src="userInfo.user_pic"
          v-imgerror="defaultImgUrl"
        />
        <!-- <el-image
            class="avatar"
            :src="userInfo.user_pic"
            v-imgerror="defaultImgUrl"
          /> -->
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <span>个人中心</span>
        </template>
        <el-menu-item index="1-1" @click="click1"
          ><i class="el-icon-s-operation"></i>基本资料</el-menu-item
        >
        <el-menu-item index="1-2" @click="click2"
          ><i class="el-icon-camera"></i>更换头像</el-menu-item
        >
        <el-menu-item index="1-3" @click="click3"
          ><i class="el-icon-key"></i>重置密码</el-menu-item
        >
      </el-submenu>
      <el-menu-item index="2" @click="handelLogout"
        ><i class="el-icon-switch-button"></i>退出</el-menu-item
      >
    </el-menu>
  </el-header>
</template>

<script>
import defaultImgUrl from '@/assets/logo.png'
export default {
  name: 'Navbar',
  data() {
    return {
      userInfo: {},
      defaultImgUrl
    }
  },
  created() {
    this.$store.dispatch('user/getUserInfoAction')
    this.userInfo = this.$store.state.user.userInfo
  },
  methods: {
    // 退出登录
    async handelLogout() {
      try {
        // 询问
        await this.$confirm('确定退出吗？', '提示', {
          type: 'warning'
        })
        // 确定
        // 删除本地token
        this.$store.dispatch('user/logoutAction')
        //  跳转到登录页面
        this.$router.replace(`/login?redirectUrl=${this.$route.fullPath}`)
        // 删除成功的提示
        this.$message.success('退出成功')
      } catch (error) {
        // 取消
        this.$message.info('已取消')
      }
    },
    // 侧边栏是否弹出
    toggleClick() {
      this.$emit('showNavbar')
    },
    click1() {
      this.$router.push('/layout/user-info')
      this.$emit('closeNav')
    },
    click2() {
      this.$router.push('/layout/user-avatar')
      this.$emit('closeNav')
    },
    click3() {
      this.$router.push('/layout/user-pwd')
      this.$emit('closeNav')
    }
  }
}
</script>

<style lang="less" scoped>
.el-header,
.btn,
.el-aside {
  background-color: #23262e;
}
.wh {
  margin-right: 30px;
}
.btn {
  margin-top: 10px;
  border: 0;
  color: #ccc;
  font-size: 25px;
  margin-left: 20px;
}
.topl {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-header {
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.avatar {
  border-radius: 50%;
  width: 35px;
  height: 35px;
  background-color: #fff;
  margin-right: 10px;
  object-fit: cover;
}
</style>
